<template>
    <u-navbar 
        :safeAreaInsetTop="safeAreaInsetTop"
        :placeholder="placeholder"
        :fixed="fixed"
        :border="border"
        :leftIcon="leftIcon"
        :leftText="leftText"
        :rightText="rightText"
        :rightIcon="rightIcon"
        :title="title"
        :bgColor="overBgColor"
        :titleWidth="titleWidth"
        :height="height"
        :leftIconSize="leftIconSize"
        :leftIconColor="overLeftIconColor"
        :autoBack="autoBack"
        :titleStyle="overTitleStyle"
        @rightClick="$emit('rightClick', $event)"
        @leftClick="$emit('leftClick', $event)"
    ></u-navbar>
</template>

<script>
    import GradientColor from '../../libs/class/GradientColor.js'
	import { deepClone } from '../../libs/util/tools.js';
    /**
     * TODO 支持透明颜色
     */
    /**
     * GradientUNavbar 二次封装带渐变效果的 u-navbar
     * @author liruilin
     * @description 二次封装带渐变效果的 u-navbar，可单独设置title left backgroundColor的变换前后颜色，其他属性同 u-navbar
     * @property {String} scrollTop 页面滚动值，渐变模式需依靠此参数进行计算
     * @property {String} scrollGradualMode = [none|color|transparent] 渐变模式
     *  @value none 不开启导航栏渐变
     *  @value color 颜色渐变，变换过程中不会出现透明
     *  @value transparent 颜色变换透明过渡模式，变换过程中会出现透明
     * @property {Number} scrollGradualTop 颜色渐变top，调整大小可以控制从那个位置滚动变换
     * @property {Number} scrollGradualScrollRange 颜色渐变滚动值范围，默认100，通过调整大小可以调整滚动变换步长
     * @property {Number} scrollGradualStep 颜色渐变模式(scrollGradualMode = color)下颜色过渡梯长，默认20。通过调整大小可以细化颜色变换过程
     * @property {Number} gradualColorForm {bgColor, titleColor, leftIconColor} 渐变模式下变换前的颜色，颜色支持hex和rgb两种格式，目前不支持rgba和单词
     * @property {Number} gradualColorNext {bgColor, titleColor, leftIconColor} 渐变模式下变换后的颜色，颜色支持hex和rgb两种格式，目前不支持rgba和单词
     * @example <lrl-gradient-u-navbar></lrl-gradient-u-navbar>
     */
    export default {
        name:"lrl-gradient-u-navbar",
        props: {
        	// 是否开启顶部安全区适配
        	safeAreaInsetTop: {
        		type: Boolean,
        		default: uni.$u.props.navbar.safeAreaInsetTop
        	},
        	// 固定在顶部时，是否生成一个等高元素，以防止塌陷
        	placeholder: {
        		type: Boolean,
        		default: uni.$u.props.navbar.placeholder
        	},
        	// 是否固定在顶部
        	fixed: {
        		type: Boolean,
        		default: uni.$u.props.navbar.fixed
        	},
        	// 是否显示下边框
        	border: {
        		type: Boolean,
        		default: uni.$u.props.navbar.border
        	},
        	// 左边的图标
        	leftIcon: {
        		type: String,
        		default: uni.$u.props.navbar.leftIcon
        	},
        	// 左边的提示文字
        	leftText: {
        		type: String,
        		default: uni.$u.props.navbar.leftText
        	},
        	// 左右的提示文字
        	rightText: {
        		type: String,
        		default: uni.$u.props.navbar.rightText
        	},
        	// 右边的图标
        	rightIcon: {
        		type: String,
        		default: uni.$u.props.navbar.rightIcon
        	},
        	// 标题
        	title: {
        		type: [String, Number],
        		default: uni.$u.props.navbar.title
        	},
        	// 背景颜色
        	bgColor: {
        		type: String,
        		default: uni.$u.props.navbar.bgColor
        	},
        	// 标题的宽度
        	titleWidth: {
        		type: [String, Number],
        		default: uni.$u.props.navbar.titleWidth
        	},
        	// 导航栏高度
        	height: {
        		type: [String, Number],
        		default: uni.$u.props.navbar.height
        	},
        	// 左侧返回图标的大小
        	leftIconSize: {
        		type: [String, Number],
        		default: uni.$u.props.navbar.leftIconSize
        	},
        	// 左侧返回图标的颜色
        	leftIconColor: {
        		type: String,
        		default: uni.$u.props.navbar.leftIconColor
        	},
        	// 点击左侧区域(返回图标)，是否自动返回上一页
        	autoBack: {
        		type: Boolean,
        		default: uni.$u.props.navbar.autoBack
        	},
        	// 标题的样式，对象或字符串
        	titleStyle: {
        		type: [String, Object],
        		default: uni.$u.props.navbar.titleStyle
        	},
            scrollTop: {
                type: Number,
                default: 0
            },
            scrollGradualTop: {
                type: Number,
                default: 0
            },
            scrollGradualMode: {
                type: String,
                default: 'none'
            },
            scrollGradualScrollRange: {
                type: Number,
                default: 100
            },
            scrollGradualStep: {
                type: Number,
                default: 20
            },
            gradualColorForm: {
                type: Object,
                default: () => {
                    return {
                        bgColor: '#FFFFFF',
                        titleColor: '#333333',
                        leftIconColor: '#333333'
                    }
                }
            },
            gradualColorNext: {
                type: Object,
                default: () => {
                    return {
                        bgColor: '#FFFFFF',
                        titleColor: '#333333',
                        leftIconColor: '#333333'
                    }
                }
            }
        },
        data() {
            return {
                overScrollTop: 0
            };
        },
        computed: {
            /* watch监听颜色改变，重设颜色列表 */
            bgColorWatch(){
                return `${ this.gradualColorForm.bgColor }-${ this.gradualColorNext.bgColor }-${ this.scrollGradualStep }` 
            },
            titleColorWatch(){ 
                return `${ this.gradualColorForm.titleColor }-${ this.gradualColorNext.titleColor }-${ this.scrollGradualStep }`
            },
            leftIconColorWatch(){ 
                return `${ this.gradualColorForm.leftIconColor }-${ this.gradualColorNext.leftIconColor }-${ this.scrollGradualStep }`
            },
            /* end */
            
            /**
             * 标题样式处理，主要是针对渐变颜色
             */
            overTitleStyle(){
                let style = deepClone(this.titleStyle || {})
                if(this.overTitleColor) {
                    style['color'] = this.overTitleColor
                }
                return style
            },
            isScrollGradual(){
                return this.scrollGradualMode != 'none'
            },
            // 背景颜色
            overBgColor(){
                return this.hasUseColor(
                    this.gradualColorForm.bgColor,
                    this.gradualColorNext.bgColor,
                    this.bgColorGradualSection,
                    this.bgColor
                )
            },
            // 标题颜色
            overTitleColor(){
                return this.hasUseColor(
                    this.gradualColorForm.titleColor,
                    this.gradualColorNext.titleColor,
                    this.titleColorGradualSection,
                    this.titleStyle.color
                )
            },
            // 左侧图标以及左侧文字颜色
            overLeftIconColor(){
                return this.hasUseColor(
                    this.gradualColorForm.leftIconColor,
                    this.gradualColorNext.leftIconColor,
                    this.leftIconColorGradualSection,
                    this.leftIconColor
                )
            },
            // 渐变百分比，0 - 1 表示
            gradualPercentage(){
                return Math.min((this.overScrollTop - this.scrollGradualTop) / this.scrollGradualScrollRange , 1)
            },
            
        },
        watch: {
            scrollTop: {
                immediate: true,
                handler(top){
                    if(this.throttle) return
                    this.throttle = setTimeout((top) => {
                        this.throttle = false
                        // 为了保证最后一次计算比例是完整的，所以在此赋值
                        this.overScrollTop = top
                    }, 10, top)
                }
            },
            bgColorWatch: {
                immediate: true,
                handler(){
                    this.bgColorGradualSection = GradientColor.gradientColor(
                        this.gradualColorForm.bgColor, 
                        this.gradualColorNext.bgColor, 
                        this.scrollGradualStep
                    )
                }
            },
            titleColorWatch: {
                immediate: true,
                handler(){
                    this.titleColorGradualSection = GradientColor.gradientColor(
                        this.gradualColorForm.titleColor, 
                        this.gradualColorNext.titleColor, 
                        this.scrollGradualStep
                    )
                }
            },
            leftIconColorWatch: {
                immediate: true,
                handler(){
                    this.leftIconColorGradualSection = GradientColor.gradientColor(
                        this.gradualColorForm.leftIconColor, 
                        this.gradualColorNext.leftIconColor, 
                        this.scrollGradualStep
                    )
                }
            }
        },
        created(){
            // 背景渐变颜色区间值
            this.bgColorGradualSection = this.bgColorGradualSection || []
            // 标题渐变颜色区间值
            this.titleColorGradualSection = this.titleColorGradualSection || []
            // 左侧图标以及文字渐变颜色区间值
            this.leftIconColorGradualSection = this.leftIconColorGradualSection || []
        },
        methods: {
            /**
             * 根据已算出的渐变比例获取透明渐变颜色
             * @param {String} formColor
             * @param {String} nextColor
             */
            getTransparentGradualColor(formColor, nextColor){
                const { gradualPercentage } = this
                let scale = Math.abs(1 - ( (1 - gradualPercentage) * 2 ))
                var [r, g, b] = GradientColor.colorRgb(gradualPercentage > 0.5 ? nextColor : formColor)
                return `rgba(${r}, ${g}, ${b}, ${ scale })`;
            },
            /**
             * 业务判断mode模式，使用颜色
             * @param {String} formColor
             * @param {String} nextColor
             * @param {String} section
             * @param {String} originColor
             */
             hasUseColor(formColor, nextColor, section = [], originColor){
                if(this.isScrollGradual){
                    // 颜色变换模式
                    if(this.scrollGradualMode === 'color') {
                        return section[Math.floor((this.scrollGradualStep) * this.gradualPercentage)]
                    // 颜色变换透明过渡模式
                    }else {
                        return this.getTransparentGradualColor(formColor, nextColor)
                    }
                }else {
                    // 未开启渐变导航栏使用原始设置的颜色
                    return originColor
                }
            }
        }
        
    }
</script>

<style>

</style>